<!-- 服装配饰列表页面 -->
<template>
  <div class="accessory-list-container">
    <el-card class="filter-card">
      <div class="filter-header">
        <h2>服装配饰</h2>
        <div class="right-actions">
          <el-button type="primary" @click="resetFilters">重置筛选</el-button>
        </div>
      </div>
      <el-form :model="filterForm" label-width="80px" inline>
        <el-form-item label="关键词">
          <el-input v-model="filterForm.keyword" placeholder="配饰名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="配饰类型">
          <el-select v-model="filterForm.type" placeholder="全部" clearable>
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格范围">
          <el-input-number 
            v-model="filterForm.minPrice" 
            :min="0" 
            :precision="2" 
            :step="5" 
            size="small"
            placeholder="最低价">
          </el-input-number>
          <span class="price-separator">至</span>
          <el-input-number 
            v-model="filterForm.maxPrice" 
            :min="0" 
            :precision="2" 
            :step="5" 
            size="small"
            placeholder="最高价">
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="accessory-card">
      <div class="accessory-grid">
        <div v-for="accessory in accessoryList" :key="accessory.id" class="accessory-item" @click="showDetail(accessory)">
          <div class="accessory-image">
            <el-image :src="accessory.imageUrl || defaultImage" :alt="accessory.name" fit="cover">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Collection /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="accessory-info">
            <h3>{{ accessory.name }}</h3>
            <div class="accessory-price">￥{{ accessory.price }}</div>
            <div class="accessory-tags">
              <el-tag size="small" v-if="accessory.type">{{ accessory.type }}</el-tag>
              <el-tag size="small" type="success" v-if="accessory.material">{{ accessory.material }}</el-tag>
              <el-tag size="small" type="info" v-if="accessory.color">{{ accessory.color }}</el-tag>
            </div>
          </div>
        </div>
      </div>
      
      <div class="empty-data" v-if="accessoryList.length === 0">
        <el-empty description="暂无配饰数据"></el-empty>
      </div>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[12, 24, 36, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    
    <!-- 配饰详情弹窗 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="配饰详情"
      width="600px"
      destroy-on-close
    >
      <div class="accessory-detail" v-if="currentAccessory">
        <div class="detail-header">
          <div class="detail-image">
            <el-image :src="currentAccessory.imageUrl || defaultImage" fit="cover">
              <template #error>
                <div class="image-placeholder">
                  <el-icon><Collection /></el-icon>
                </div>
              </template>
            </el-image>
          </div>
          <div class="detail-info">
            <h2>{{ currentAccessory.name }}</h2>
            <div class="info-item">
              <span class="label">价格：</span>
              <span class="price">￥{{ currentAccessory.price }}</span>
            </div>
            <div class="info-item">
              <span class="label">配饰类型：</span>
              <span>{{ currentAccessory.type || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">材质：</span>
              <span>{{ currentAccessory.material || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">颜色：</span>
              <span>{{ currentAccessory.color || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">适用服装：</span>
              <span>{{ currentAccessory.clothingType || '未设置' }}</span>
            </div>
          </div>
        </div>
        
        <div class="detail-description">
          <h3>配饰描述</h3>
          <p>{{ currentAccessory.description || '暂无描述' }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { Collection } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default {
  name: 'AccessoryList',
  components: {
    Collection
  },
  setup() {
    // 默认图片
    const defaultImage = ref('https://via.placeholder.com/200x200?text=暂无图片')
    
    // 配饰列表
    const accessoryList = ref([])
    
    // 筛选表单
    const filterForm = reactive({
      keyword: '',
      type: '',
      minPrice: null,
      maxPrice: null
    })
    
    // 分页设置
    const pagination = reactive({
      currentPage: 1,
      pageSize: 12,
      total: 0
    })
    
    // 配饰类型选项
    const typeOptions = [
      { value: 'button', label: '纽扣' },
      { value: 'zipper', label: '拉链' },
      { value: 'lace', label: '蕾丝' },
      { value: 'patch', label: '贴片' },
      { value: 'embroidery', label: '刺绣' },
      { value: 'buckle', label: '扣环' },
      { value: 'ribbon', label: '丝带' }
    ]
    
    // 详情弹窗
    const detailDialogVisible = ref(false)
    const currentAccessory = ref(null)
    
    // 获取配饰列表
    const fetchData = async () => {
      try {
        // 构建查询参数
        const params = {
          page: pagination.currentPage - 1,
          size: pagination.pageSize
        }
        
        if (filterForm.keyword) {
          params.keyword = filterForm.keyword
        }
        
        if (filterForm.type) {
          params.type = filterForm.type
        }
        
        if (filterForm.minPrice !== null) {
          params.minPrice = filterForm.minPrice
        }
        
        if (filterForm.maxPrice !== null) {
          params.maxPrice = filterForm.maxPrice
        }
        
        const response = await axios.get('/api/clothing/accessories', { params })
        
        if (response.data.code === 200) {
          // 模拟数据，实际项目中应该使用后端返回的数据
          const mockData = simulateData(params)
          accessoryList.value = mockData.content
          pagination.total = mockData.totalElements
        } else {
          ElMessage.error(response.data.message || '获取配饰列表失败')
        }
      } catch (error) {
        console.error('获取配饰列表失败:', error)
        ElMessage.error('获取配饰列表失败，请稍后重试')
        
        // 模拟数据，实际项目中移除
        const mockData = simulateData({})
        accessoryList.value = mockData.content
        pagination.total = mockData.totalElements
      }
    }
    
    // 重置筛选条件
    const resetFilters = () => {
      filterForm.keyword = ''
      filterForm.type = ''
      filterForm.minPrice = null
      filterForm.maxPrice = null
      pagination.currentPage = 1
      fetchData()
    }
    
    // 显示详情
    const showDetail = (accessory) => {
      currentAccessory.value = accessory
      detailDialogVisible.value = true
    }
    
    // 处理每页数量变化
    const handleSizeChange = (size) => {
      pagination.pageSize = size
      fetchData()
    }
    
    // 处理页码变化
    const handleCurrentChange = (page) => {
      pagination.currentPage = page
      fetchData()
    }
    
    // 模拟数据，实际项目中应该使用后端返回的数据
    const simulateData = (params) => {
      const allAccessories = [
        {
          id: 1,
          name: '珍珠纽扣',
          description: '优质珍珠纽扣，光泽柔和，适合各种高档女装和礼服。',
          imageUrl: 'https://via.placeholder.com/300x300?text=珍珠纽扣',
          type: '纽扣',
          price: 12.50,
          material: '珍珠',
          color: '白色',
          clothingType: '衬衫、礼服'
        },
        {
          id: 2,
          name: '金属拉链',
          description: '耐用金属拉链，开合顺畅，适合各种外套和裤装。',
          imageUrl: 'https://via.placeholder.com/300x300?text=金属拉链',
          type: '拉链',
          price: 8.00,
          material: '金属',
          color: '银色',
          clothingType: '外套、裤装'
        },
        {
          id: 3,
          name: '蕾丝花边',
          description: '精致蕾丝花边，质地柔软，适合女装装饰。',
          imageUrl: 'https://via.placeholder.com/300x300?text=蕾丝花边',
          type: '蕾丝',
          price: 15.00,
          material: '棉线',
          color: '白色',
          clothingType: '女装、婚纱'
        },
        {
          id: 4,
          name: '刺绣贴片',
          description: '精美刺绣贴片，可缝制在衣物上做装饰。',
          imageUrl: 'https://via.placeholder.com/300x300?text=刺绣贴片',
          type: '贴片',
          price: 20.00,
          material: '混合材质',
          color: '多彩',
          clothingType: '外套、T恤'
        },
        {
          id: 5,
          name: '木质纽扣',
          description: '天然木质纽扣，质感自然，适合休闲装饰。',
          imageUrl: 'https://via.placeholder.com/300x300?text=木质纽扣',
          type: '纽扣',
          price: 5.00,
          material: '木材',
          color: '原木色',
          clothingType: '衬衫、毛衣'
        },
        {
          id: 6,
          name: '金属扣环',
          description: '精致金属扣环，坚固耐用，适合皮带和包袋。',
          imageUrl: 'https://via.placeholder.com/300x300?text=金属扣环',
          type: '扣环',
          price: 18.00,
          material: '合金',
          color: '金色',
          clothingType: '皮带、包袋'
        },
        {
          id: 7,
          name: '彩色丝带',
          description: '柔软光滑的彩色丝带，可用于多种装饰。',
          imageUrl: 'https://via.placeholder.com/300x300?text=彩色丝带',
          type: '丝带',
          price: 6.50,
          material: '缎面',
          color: '红色',
          clothingType: '礼服、裙装'
        },
        {
          id: 8,
          name: '亮片贴花',
          description: '闪亮亮片贴花，增添服装亮点。',
          imageUrl: 'https://via.placeholder.com/300x300?text=亮片贴花',
          type: '贴花',
          price: 25.00,
          material: '亮片',
          color: '银色',
          clothingType: '晚礼服、舞台装'
        },
        {
          id: 9,
          name: '塑料纽扣',
          description: '实用塑料纽扣，多色可选，适合各种日常服装。',
          imageUrl: 'https://via.placeholder.com/300x300?text=塑料纽扣',
          type: '纽扣',
          price: 3.50,
          material: '塑料',
          color: '黑色',
          clothingType: '衬衫、裤子'
        },
        {
          id: 10,
          name: '花朵刺绣',
          description: '精美花朵刺绣，为服装增添自然美感。',
          imageUrl: 'https://via.placeholder.com/300x300?text=花朵刺绣',
          type: '刺绣',
          price: 30.00,
          material: '刺绣线',
          color: '多彩',
          clothingType: '外套、裙装'
        },
        {
          id: 11,
          name: '尼龙拉链',
          description: '耐用尼龙拉链，使用寿命长，适合各种服装。',
          imageUrl: 'https://via.placeholder.com/300x300?text=尼龙拉链',
          type: '拉链',
          price: 4.00,
          material: '尼龙',
          color: '黑色',
          clothingType: '外套、裤装'
        },
        {
          id: 12,
          name: '皮质标签',
          description: '高档皮质标签，可定制品牌Logo，增加品牌辨识度。',
          imageUrl: 'https://via.placeholder.com/300x300?text=皮质标签',
          type: '标签',
          price: 10.00,
          material: '真皮',
          color: '棕色',
          clothingType: '牛仔裤、外套'
        }
      ]
      
      // 根据筛选条件过滤
      let filteredAccessories = [...allAccessories]
      
      if (params.keyword) {
        filteredAccessories = filteredAccessories.filter(item => 
          item.name.includes(params.keyword) || 
          (item.description && item.description.includes(params.keyword))
        )
      }
      
      if (params.type) {
        const typeLabel = typeOptions.find(option => option.value === params.type)?.label
        filteredAccessories = filteredAccessories.filter(item => item.type === typeLabel)
      }
      
      if (params.minPrice !== undefined && params.minPrice !== null) {
        filteredAccessories = filteredAccessories.filter(item => item.price >= params.minPrice)
      }
      
      if (params.maxPrice !== undefined && params.maxPrice !== null) {
        filteredAccessories = filteredAccessories.filter(item => item.price <= params.maxPrice)
      }
      
      // 计算分页
      const start = (pagination.currentPage - 1) * pagination.pageSize
      const end = start + pagination.pageSize
      const paginatedAccessories = filteredAccessories.slice(start, end)
      
      return {
        content: paginatedAccessories,
        totalElements: filteredAccessories.length
      }
    }
    
    // 页面加载时获取数据
    onMounted(() => {
      fetchData()
    })
    
    return {
      defaultImage,
      accessoryList,
      filterForm,
      pagination,
      typeOptions,
      detailDialogVisible,
      currentAccessory,
      fetchData,
      resetFilters,
      showDetail,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.accessory-list-container {
  width: 100%;
}

.filter-card {
  margin-bottom: 20px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.filter-header h2 {
  margin: 0;
}

.price-separator {
  margin: 0 5px;
}

.accessory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.accessory-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  height: 100%;
}

.accessory-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.accessory-image {
  height: 180px;
  overflow: hidden;
}

.accessory-image img, .accessory-image .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
  font-size: 30px;
}

.accessory-info {
  padding: 15px;
}

.accessory-info h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accessory-price {
  color: #f56c6c;
  font-weight: bold;
  margin-bottom: 10px;
}

.accessory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.empty-data {
  padding: 40px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 详情弹窗样式 */
.accessory-detail {
  padding: 0 20px;
}

.detail-header {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.detail-image {
  width: 200px;
  height: 200px;
}

.detail-image .el-image {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.detail-info {
  flex: 1;
}

.detail-info h2 {
  margin: 0 0 20px 0;
  color: #303133;
}

.info-item {
  margin-bottom: 10px;
  line-height: 1.6;
}

.info-item .label {
  color: #909399;
  margin-right: 5px;
}

.info-item .price {
  color: #f56c6c;
  font-weight: bold;
}

.detail-description h3 {
  margin: 0 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
}

.detail-description p {
  line-height: 1.8;
  color: #606266;
}
</style> 